<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="java">
<head>
    <title>News Recommender System</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/news.css">
    <style>
        .box {
            transition: 0.3s;
            width: 290px;
            border: 1px solid #ccc;
            margin: 20px 20px;
            padding: 10px 20px;
            display: inline-block;
            background-color: #fff;
        }

        .box:hover {
            transition: 0.3s;
            border: 1px solid;
            color: #252525;
        }

        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <h1>News Recommender System</h1>
    <p>当前位置：网站首页</p>
    <div>
        <h4>登录界面</h4>
        <form action="articleSearch" method="post">
            <button class="box" th:each="user:${userList}" th:value="${user.id}" name="userId">
                <span th:text="'用户名：'+${user.username}"></span>
                <p/>
                <span th:text="'性别：'+${user.gender}"></span>
                <p/>
                <span th:text="'出生年份：'+${user.birthYear}"></span>
                <p/>
                <span th:text="'学历：'+${user.education}"></span>
                <p/>
                <span th:text="'工作：'+${user.career}"></span>
            </button>
        </form>
    </div>
</div>
</body>
</html>